<html>
	<head>
		<title>maquetacion1</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="js/mainMenu.js"></script>
		<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/styles.css" />
		
		
		<script type="text/javascript">
			$(document).ready(function() {
				// for user menu
				$('#user_submenu ul li a div').css('width', (($('#user_menu').width() - (parseInt($('#user_submenu ul li a div').css('padding-left').replace('px', '')) * 2)) - 1) + 'px');
				$('#user_menu').click(function(){
					$('#user_submenu').slideToggle(100);
				});
			});
		</script>
		
	</head>
	<body>
		<div id="sponsor" class="text_align_center">Aquí va la publicidad</div>
		<div id="header">
			<div class="column_1_4">
				<img src="imagenes/logo.png" />
			</div><!--
			--><div class="column_3_4">
				<div class="column_7_10"></div><!--
				--><div id="userBox" class="column_3_10">
					<div class="column_1_4 vertical_middle hiddenOnPhone">
						<div>
							<img class="foto_usuario" src="imagenes/foto_usuario_ejemplo.jpg" />
						</div>
					</div><!--
					--><div class="column_1_2 vertical_middle">
						<div id="user_menu">
							<a href="#">
								<div class="column_9_10 vertical_middle">
									<div class="padding_10">Javier G.</div>
								</div><!--
								--><div class="column_1_10 vertical_middle">
									<img src="imagenes/flecha_abajo.png" />
								</div>
							</a>
						</div>
						<div id="user_submenu" class="box">
							<ul>
								<li>
									<a href="#"><div>Opción 1</div></a>
								</li>
								<li>
									<a href="#"><div>Salir</div></a>
								</li>
							</ul>
						</div>
					</div><!--
					--><div class="column_1_4 vertical_middle hiddenOnPhone">
						<div>
							<a href="#"><img src="imagenes/icono_lista.gif" /></a>
							<a href="#"><img src="imagenes/icono_lista.gif" /></a>
						</div>
					</div>
					<div id="login_register_buttons">
						<a href="#"><div class="column_1_2 text_align_center"><div class="padding_10 border_right_1">Loguear</div></div></a><!--
						--><a href="#"><div class="column_1_2 text_align_center"><div class="padding_10">Reguistrar</div></div></a>
					</div>
				</div>
				<br /><br />
				<div class="column_1_2"></div><!--
				--><div class="column_1_2 text_align_right">
					<form action="cabecera.html">
						<div class="column_9_10">
							<input type="text" class="width_full search_input" placeholder="Buscar ruta..."  />
						</div><!--
						--><input class="search_button margin_0" type="image" src="imagenes/search_icon.png" />
					</form>
				</div>
				<br /><br />
				<div>
					<nav>
						<div class="button">Menú</div>
						<ul>
							<li class="hiddenOnPhone"><img id="menu_selector_icon" class="hiddenOnPhone" src="imagenes/icono_selector_menu.png" /></li><!--
							--><li><a href="#">INICIO</a></li><!--
							--><li><a href="#">RUTA</a></li><!--
							--><li><a href="#">BUSCADOR</a></li><!--
							--><li><a href="#">ACTIVIDADES</a></li><!--
							--><li><a href="#">ÚLTIMAS RUTAS</a></li><!--
							--><li><a href="#">SUBIR RUTA</a></li><!--
							--><li><a href="#">CONTACTO</a></li>
						</ul>
					</nav>
				</div>
			</div>	
			<hr />
		</div>
	</body>
</html>